<template>
	<!-- 欢迎语 -->
	<view class="home">
		<view class="head">
			<navigator class="goBack" open-type="navigateBack">
				<u-icon name="arrow-left" color="#444" size="28" style="margin-right: 10rpx;"></u-icon>
				欢迎语/新建欢迎语
			</navigator>
		</view>
		<view class="Item1">
			<view class="title" style="margin-left: 20rpx;">
				<titleRow style="margin-left: 20rpx;"  :titleName="titleName1"></titleRow>
				
			</view>
			<view class="tips">
				! 如果客户通过渠道码添加员工，在渠道码处设置的欢迎
				语会被优先推送
			</view>
		</view>
		<view style="background-color: #f9f9f9;height: 20rpx;">
			
		</view>
		<view class="Item2">
			<view class="title" style="margin-left: 20rpx;">
				<titleRow style="margin-left: 20rpx;" :titleName="titleName2"></titleRow>
			</view>
			<view class="content2">
				<!-- <view class="nickName">
					<u-input v-model="formObj.ninkName" placeholder-style="color:#D4A86C;" placeholder="[插入客户昵称]" type="text" :border="false" />
				</view> -->
				<contentAddAttachment ref="formContent" style="border-top: 2rpx dashed #707070;"></contentAddAttachment>
			</view>
			<view class="btns">
				<view class="cancle">
					取消
				</view>
				<view class="submit" @click="submit">
					创建欢迎语
				</view>
			</view>
			<view style="background-color: #f9f9f9;height: 150rpx;margin-top: 40rpx;">
			</view>
		</view>
		
	</view>
</template>

<script>
	import titleRow from '@/component/titleRow/titleRow.vue'
	import contentAddAttachment from '@/component/contentAddAttachment/contentAddAttachment.vue'
	export default {
		data() {
			return {
				titleName1:'基础信息',
				titleName2:'欢迎语设置',
				// formObj:{
				// 	ninkName:'',
				// 	crowdText:'',
				// },
				formParams:{
					content:'' ,//消息内容
					image_pic_url:'',// 图片地址
					link_title :'',// 图文消息标题
					link_picurl:'',// 图文消息封面的url
					link_desc :'',//图文消息的描述
					link_url:'',// 图文消息的链接
					miniprogram_title:'', //小程序消息标题
					miniprogram_pic_media_id :'',//小程序消息封面的mediaid，封面图建议尺寸为520*416
					miniprogram_appid :'',//小程序appid
					miniprogram_page :'',//	小程序page路径
				}
			};
		},
		components:{
			titleRow,contentAddAttachment
		},
		methods:{
			submit(){
				Object.assign( this.formParams,this.$refs.formContent.formObj )
				if(!this.formParams.content){
					uni.showToast({
					    title: '请先填写欢迎语内容',
					    duration: 3000,
						icon:'none'
					});
					return
				}
				Object.assign( this.formParams,this.$refs.formContent.miniProgramForm )
				// console.log(this.formParams);
				let newObj = this.sameKeyCopy(this.formParams,this.$refs.formContent.urlForm)  
				console.log(newObj);
				this.postForm(newObj)
			},
			async postForm(_params){
				let res = await this.myhttp({
					url:'api/Xluser/addCustomerWelcome',
					data:	_params,			
				}).then(res=>{
					console.log(res);
					if(res.data.code==1){
						uni.showToast({
						    title: '创建成功',
						    duration: 3000,
							icon:'success'
						});
						setTimeout(()=>{
							uni.navigateBack({
							    delta: 1
							});
						},2000)
					}else{
						uni.showToast({
						    title: '创建失败',
						    duration: 3000,
							icon:'none'
						});
					}
				})
			},
			sameKeyCopy(_copyTarget,_copyObj){
				for (let key1 in _copyTarget) {
					for (let key2 in _copyObj) {
						if(key1==key2){
							_copyTarget[key1] = _copyObj[key2]
						}
					}
				}
				return _copyTarget
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		 background-color: #f9f9f9;
		 height: 100%;
  		.head {
			  display: flex;
			  justify-content: space-between;
			  height: 90rpx;
			  align-items: center;
			  padding: 0 30rpx;
			  background-color: #fff;
    		.goBack {
				color: #444444;
    		}

    		.goNew {
				background: #0991FF;
				color: #fff;
				height: 60rpx;
				width: 120rpx;
				display: grid;
				place-items: center;
				border-radius: 4rpx;
    		}
  		}
		.Item1{
			background-color: #fff;
			padding-bottom: 15rpx;
			.tips{
				width: 90%;
				padding: 20rpx;
				background-color: #FCF8F3;
				color: #D4A86C;
				margin: 10rpx auto;
				font-size: 26rpx;
			}
		}
		
  		.Item2 {
			height: 580rpx;
			background-color: #fff;
			&:nth-child(2)
    		.title {
				titlerow {
				}
    		}

    		.content2 {
				background-color: #FAFBFA;
				// display: flex;
				// align-items: center;
				// justify-content: center;
				height: 450rpx;
				margin-bottom: 40rpx;
				margin: 20rpx;
				.nickName{
					padding-left: 20rpx;
				}
				.crowdText{
					padding:20rpx 20rpx 0;
					height: 370rpx;
					border-top: 2rpx dashed #707070;
					border-bottom: 2rpx solid #EEEEEE;
				}
				.addAccessory{
					margin: 18rpx 60rpx;
					color: #2772FE;
					position: relative;
				}
				.addAccessory::before{
					content: '+';
					position: absolute;
					top: 5%;
					left: -7%;
					width: 30rpx;
					height: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 2rpx solid #2772FE;
					border-radius: 50%;
				}
    		}
			.btns{
				margin-top: 120rpx;
				display: flex;
				justify-content: space-between;
				width: 100%;
				padding: 0rpx 30rpx;
				.cancle{
					height: 84rpx;
					width: 47%;
					background-color: #fff;
					border: 1px solid #D9D9D8;
					display: grid;
					color: #595959;
					place-items: center;
					border-radius: 8rpx;
				}
				.submit{
					height: 84rpx;
					width: 47%;
					display: grid;
					place-items: center;
					color: #fff;
					background-color: #2772FE;
					border-radius: 8rpx;
				}
			}
  		}
	}
</style>
